<template></template>
<!-- 地图控件 -->

<script setup>
import { onMounted } from "vue"
import { gaodeVector, gaodeImage } from "../../../../map_libs/TDmap"
onMounted(() => {
  //获取 map 属性
  const map = useGlobalMap()
  // 地图控件
  // // 1. 视图跳转控件
  // const ZoomToExtent = new ol.control.ZoomToExtent({
  //   extent: [110, 30, 160, 30],
  // })
  // map.addControl(ZoomToExtent)
  // /* 2. zoomslider */
  // /* 实例化zoomslider */
  // const zoomslider = new ol.control.ZoomSlider()
  // map.addControl(zoomslider)

  // const fullScreen = new ol.control.FullScreen()
  // map.addControl(fullScreen)

  // 3、鼠标位置显示坐标控件
  const mousePositionControl = new ol.control.MousePosition({
    /* 坐标格式 */
    coordinateFormat: ol.coordinate.createStringXY(4),
    projection: "EPSG:4326",
    /* 坐标信息显示样式类名,默认是'ol-mouse-position' */
    className: "ol-mouse-position",
    target: document.getElementById("mouse-position"),
    undefinedHTML: "&nbsp",
  })
  map.addControl(mousePositionControl)

  /* 4、比例尺 */
  const scaleLineControl = new ol.control.ScaleLine({
    /* 设置比例尺单位,degrees,imperial,us,nautical,metric */
    units: "metric",
  })
  map.addControl(scaleLineControl)
  // const overviewMapControl = new ol.control.OverviewMap({
  //   /* 鹰眼控件样式  */
  //   className: "ol-overviewmap ol-custom-overviewmap",
  //   layers: [gaodeImage, gaodeVector],
  //   /* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
  //   collapseLabel: "\u00BB",
  //   /* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
  //   label: "\u00AB",
  //   /* 初始为展开显示方式 */
  //   collapsed: false,
  //   view: new ol.View({
  //     projection: "EPSG:4326",
  //     minZoom: 8,
  //     maxZoom: 18,
  //   }),
  // })
  // map.addControl(overviewMapControl)
})
</script>

<style scoped></style>
